<template>
  <div>
    <!-- 创建导航栏，左侧有一个按钮用于触发侧边导航栏的显示 -->
    <van-nav-bar
      title="评分管理系统"
      left-text="菜单"
      @click-left="showSettingsModal = true"
      fixed
    >
      <template #left>
        <van-icon name="ellipsis" size="18" />
      </template>
    </van-nav-bar>
    <!-- 遮罩层，当弹窗显示时，它也显示 -->
    <!-- <div v-if="showSettingsModal" class="overlay" @click="hideSettingsModal"></div>   -->
    <!-- 创建侧边导航栏，使用 v-model 控制其显示与隐藏 -->
    <SettingsVue
      :isVisible="showSettingsModal"
      @close="showSettingsModal = false"
    ></SettingsVue>

    <!-- 点击屏幕其他地方关闭弹窗 -->
    <div
      @click.stop="hideSettingsModal"
      v-if="showSettingsModal"
      class="overlay"
    ></div>
    <!-- <Main></Main> -->
  </div>
</template>

<script>
import SettingsVue from "./Settings.vue";
// import Main from "./Main.vue";
export default {
  data() {
    return {
      showSettingsModal: false,
      activeIndex: 0, // 当前激活的导航项索引
    };
  },
  methods: {
    hideSettingsModal() {
      this.showSettingsModal = false;
    },
  },
  components: {
    SettingsVue,
    // Main,
  },
};
</script>

<!-- <style scoped>  
.overlay {  
  position: fixed;  
  top: 0;  
  left: 0;  
  right: 0;  
  bottom: 0;  
  z-index: 998; /* 低于弹窗的z-index */  
  cursor: pointer;  
}  
</style> -->

<style scoped>
.overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5); /* 半透明背景 */
  z-index: 998; /* 确保遮罩在内容之下，但在弹窗之上 */
  cursor: pointer; /* 设置鼠标样式为可点击 */
}
</style>